<template>
  <div class="list">
    <van-nav-bar
        v-if="$store.state.device !== 'APP'"
        title="我的补贴券"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <div class="tick-list">
<!--      <div class="title_name">补贴券</div>-->
      <ul>
        <li v-for="(item, index) in listData" :key="item.put_org + index">
          <div class="tick-wrap">
            <div class="clearfix-add">
              <span class="organizer fl">{{item.put_org}}</span>
            </div>
            <div class="main main-no-use">
              <div class="left-box">
                <p class="tick-amount">
                  <span class="unit">¥</span>
                  <span class="amount">{{item.ticket_price}}</span>
                </p>
                <p class="name">学历补贴券</p>
              </div>
              <div class="middle-box">
                <p class="long-name">2019年“求学圆梦行动”提升学历补贴券</p>
                <p class="validity">有效期:
                  <span>2019.07.01-2019.09.30</span>
                </p>
              </div>
              <a :href="openUrl" class="right-box">{{conductStatus ? '使用中' : '立即使用'}}</a>
            </div>
            <div class="clearfix-tag">
              <span v-for="keyItem in item.keyword" :key="keyItem" class="tag fl">{{keyItem}}</span>
            </div>
          </div>
          <!-- 进度条 -->
          <div v-if="conductStatus" class="step-wrap use-step">
            <div class="step clearfix">
              <div class="item on">
                <span :class="item.ticket_status === 0 || item.ticket_status === 1 ?'circle on': 'circle'"></span>
                <em>报读</em>
              </div>
              <div class="item ">
                <span :class="item.ticket_status === 2 || item.ticket_status === 3 || item.ticket_status === 4 ?'circle on': 'circle'"></span>
                <em>登记</em>
              </div>
              <div class="item ">
                <span :class="item.ticket_status === 5 || item.ticket_status === 6 ?'circle on': 'circle'"></span>
                <em class="current">申请</em>
              </div>
              <div class="item">
                <span :class="item.ticket_status === 7 ?'circle on': 'circle'"></span>
                <em>审批</em>
              </div>
              <div class="item">
                <span :class="item.ticket_status === 8 ?'circle on': 'circle'"></span>
                <em>发放</em>
              </div>
              <div class="item">
                <span :class="item.ticket_status < 0 ?'circle on': 'circle'"></span>
                <em>结束</em>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="no_order" v-if="listData.length === 0">
        <van-icon name="cash-on-deliver" />
        <P>没有优惠券</P>
      </div>
    </div>
    <share-btn v-if="$store.state.device !== 'APP'"  ref="shareUpdate"></share-btn>
  </div>
</template>
<script>
import ShareBtn from '@/components/share'
export default {
  name: 'list',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    ShareBtn
  },
  data () {
    return {
      openUrl: 'javascript:;', // https://m.oucgz.cn/web/mcdApp/professionalList?gsign=gkzx
      listData: [],
      perfectStatus: -1,
      conductStatus: false,
      gsign: this.$store.state.gsign,
      userData: null
    }
  },
  props: {},
  watch: {},
  methods: {
    getList () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/getSubsidyList?phone=${this.$store.state.personal.phone}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast('获取数据失败')
        }
        this.listData = res.data || []
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/19 0019 19:28
     *@function  判断跳转状态
     *****************************************/
    getstatus () {
      if (this.userData.is_student === 2) {
        this.openUrl = `https://m.oucgz.cn/web/professionalListNew?gsign=${this.$store.state.gsign}`
      }

      if (this.userData.is_student === 1 && this.userData.order_status === 1) {
        this.openUrl = '/personal-order'
      }

      if ((this.userData.order_status === 2 || this.userData.order_status === 3) && this.perfectStatus === 0) {
        // 手机号格式有误
        this.openSchool()
      }

      if ((this.userData.order_status === 2 || this.userData.order_status === 3) && this.perfectStatus === 1) {
        // 跳转到补贴详情
        this.conductStatus = true
        this.openUrl = `http://www.gdzgjy.com/btq/client/workeredu-ticket/detail/detail.html?ticket_id=1&phone=${this.$store.state.personal.phone}`
      }
    },
    /*
    *@author wf_Huang
    *@Time 2019/7/22 0022 10:13
    *@function  打开学籍资料
    *****************************************/
    openSchool () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/getUserUrl?studentId=${this.userData.studentId}&gsign=${this.gsign}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status === 201) {
          this.$toast('渠道名称不能为空')
          return false
        }
        if (res.status === 202) {
          this.$toast('学生ID 不能为空')
          return false
        }
        if (res.status !== 200) {
          this.$toast('请求失败，请重试')
          return false
        }
        this.openUrl = res.data.url
      }).catch(() => {})
    },
    /*
    *@author wf_Huang
    *@Time 2019/7/22 0022 10:13
    *@function  获取学籍状态
    *****************************************/
    getStureng () {
      if (this.$store.state.personal.userData) {
        this.userData = this.$store.state.personal.userData
        if (this.userData.is_student === 1) {
          this.$http({
            url: `${window.SITE_CONFIG['personalListURL']}/api/getStatus?studentId=${this.userData.studentId}`,
            method: 'get'
          }).then(({ data: res }) => {
            if (res.msgCode !== 200) {
              this.$toast('请求失败，请重试')
              return false
            }
            console.log(res.data.content.perfectStatus)
            this.perfectStatus = res.data.content.perfectStatus
            this.getstatus()
          }).catch(() => {})
        } else {
          this.getstatus()
        }
      }
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#F6F8F7')
    if (this.$route.query.device) {
      this.$store.state.device = this.$route.query.device
    }
    if (this.$route.query.gsign) {
      this.$store.state.gsign = this.$route.query.gsign
    }
    if (this.$route.query.phone) {
      this.$store.state.personal.phone = this.$route.query.phone
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    }
    // 分享数据
    this.$refs.shareUpdate.openShare(`${window.SITE_CONFIG['shareURL']}//subsidy-login?gsign=${this.gsign}`, '“上大学 升学历” 来领2019年广东省总工会职工教育补贴', '对报名参加 2019 年春季和 2019 年秋季大专、本科学历教育学习的优秀一线职工通过广东职工教育网办理申请并通过审核， 由省总工会向符合条件并审核通过的一线职工发放1000 元补贴。', 'http://workeredu.oss-cn-shenzhen.aliyuncs.com/school/407/201907/07a61ec68c4d705bfdee785d1ae2c208.png')
    Promise.all([
      this.getStureng()
    ]).then(() => {
      this.getList()
    })
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .list {
    .no_order{
      font-size: 30px;
      color: #e6e6e6;
      text-align: center;
      padding: 300px 0;
      i{
        font-size: 160px;
      }
    }
    .tick-list {
      padding: 0.3rem 0.2rem;
      &.hidden {
        display: none;
      }
      .title_name{
        border-left: 5px solid #FB6A38;
        margin: 30px 0;
        line-height: 35px;
        padding-left: 15px;
        font-size: 32px;
      }
      .list-title {
        padding-left: .16rem;
        height: .32rem;
        line-height: .32rem;
        font-size: .28rem;
        color: #333;
        border-left: .08rem solid #FB6A38;
      }

      ul {
        li {
          margin-top: .3rem;
          box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 .1rem;
          -webkit-border-radius: .1rem;
          border-radius: .1rem;
          background-color: #fff;

          .tick-wrap {
            padding-bottom: 0.24rem;
          }

          .organizer {
            margin: .24rem 0 0 .2rem;
            font-size: .24rem;
            color: #999;
            float: left;
          }
          .clearfix-add{
            display: flex;
            justify-content: space-between;
          }
          span {
            &.tips {
              margin: .24rem .2rem 0 0;
              font-size: .24rem;
              color: #999999;
            }
          }
          .main {
            display: flex;
            justify-content: space-between;
            margin: .18rem 0;
            padding: 0 .2rem;
            height: 1.7rem;
            background: url('../../../assets/img/modules/subsidy/edu_ticket_bg.png') no-repeat center center;
            background-size: contain;
            .left-box {
              padding: .1rem;
              width: 1.7rem;
              text-align: center;
              vertical-align: top;
              color: #ff7322;

              .tick-amount {
                margin: 0;
                line-height: 80px;
                vertical-align: bottom;
              }

              .unit {
                display: inline-block;
                vertical-align: .1rem;
                font-size: .30rem;
                margin-right: 0.1rem;
              }

              .amount {
                margin-left: -0.05rem;
                font-size: .44rem;
              }

              .name {
                display: block;
                margin-top: .05rem;
                font-size: .24rem;
              }
            }

            .middle-box {
              width: 51%;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              padding: .24rem 0;
              color: #ffffff;

              .long-name {
                padding-right: .2rem;
                font-size: .26rem;
                line-height: .3rem;
              }

              .validity {
                font-size: .2rem;
                white-space: nowrap;
              }
            }

            .right-box {
              width: 1.6rem;
              text-align: center;
              line-height: 1.7rem;
              font-size: .32rem;
              color: #fff;
              display: block;
            }

            &.main-skill {
              background: url('../../../assets/img/modules/subsidy/skill_ticket_bg.png') no-repeat center center;
              background-size: contain;

              .left-box {
                position: relative;
                color: #22a4ff;

                &:before {
                  content: '最高';
                  position: absolute;
                  left: 50%;
                  top: .24rem;
                  transform: translateX(-50%);
                  width: .7rem;
                  height: .3rem;
                  font-size: .2rem;
                  -webkit-border-radius: .1rem;
                  border-radius: .1rem;
                  color: #fff;
                  background: #22a4ff;
                }

                p {
                  &.tick-amount {
                    margin-top: .5rem;
                  }
                }
              }

              .right-box {
                .ticket-btn-get {
                  color: #22a4ff;
                }
              }
            }
          }
          .clearfix-tag{
            height: 50px;
            clear:both;
            display: flex;
          }
          .tag {
            margin: 0 .1rem;
            height: .34rem;
            width: 1.5rem;
            line-height: .34rem;
            font-size: .24rem;
            text-align: center;
            color: #999999;
            background-color: #F0F0F0;

            &:first-child {
              margin-left: .2rem;
            }
          }
        }
      }
    }

    .step-wrap {
      padding: .32rem .30rem .40rem .30rem;
      font-size: .28rem;
      color: #333;
      background: #f8f8f8;
      padding: .5rem .6rem;

      .step {
        display: flex;

        .item {
          display: block;
          position: relative;
          width: 100%;
          border-top: .05rem solid #dadada;

          &.on {
            border-top: .05rem solid #22c91e;
          }

          &.arrive {
            border-top: .05rem solid #22c91e;
          }

          &:first-child {
            width: 0;
          }

          .circle {
            position: absolute;
            top: -0.18rem;
            right: -.16rem;
            width: .32rem;
            height: .32rem;
            background: url('../../../assets/img/modules/subsidy/step_not_arrive.png') no-repeat center center;
            background-size: .20rem, .20rem;
            z-index: 1;

            &.on {
              background: url('../../../assets/img/modules/subsidy/step_on.png') no-repeat center center;
              background-size: .32rem, .32rem;
            }

            &.arrive {
              background: url('../../../assets/img/modules/subsidy/step_arrive.png') no-repeat center center;
              background-size: .32rem, .32rem;
            }
          }

          em {
            float: right;
            margin-right: -.5rem;
            padding-top: .25rem;
            width: 1rem;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }

  }
</style>
